<template>
  <span class="fdx-badge">
    <slot></slot>
    <transition name="fdx-zoom-in-center">
      <sup
        v-show="!hidden && (content || content === 0 || isDot)"
        v-text="content"
        class="fdx-badge__content"
        :class="{ 'is-fixed': $slots.default, 'is-dot': isDot }">
      </sup>
    </transition>
  </span>
</template>

<script>
export default {
  name: 'Badge',
  props: {
    value: {},
    max: Number,
    isDot: Boolean,
    hidden: Boolean
  },
  computed: {
    content() {
      if (this.isDot) return

      const value = this.value
      const max = this.max

      if (typeof value === 'number' && typeof max === 'number') {
        return max < value ? `${max}+` : value
      }

      return value
    }
  }
}
</script>
<style lang="scss">
@import './badge';
</style>